<template>
  <div>
    <b-navbar toggleable="lg" variant="info" id='nav'>
      <b-navbar-brand @click.prevent="goHome">
        <img src="../assets/images/logo1.png" alt style="width:120px;" />
      </b-navbar-brand>
      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
      <b-collapse id="nav-collapse" is-nav>
        <b-navbar-nav class="ml-auto" right>
          <b-navbar-nav>
            <b-nav-item @click.prevent="goHome" class="nav-fintsize"><span>首页</span></b-nav-item>
            <b-nav-item-dropdown text="套餐">
              <b-nav-item @click.prevent="goMenu" class="nav-fintsize"><a>2-4人 食</a></b-nav-item>
              <b-nav-item class="nav-fintsize"><a>4-6人 食</a></b-nav-item>
              <b-nav-item class="nav-fintsize"><a>6-8人 食</a></b-nav-item>
            </b-nav-item-dropdown>
            <b-nav-item-dropdown text="健康饮食" style="  background-color: rgb(160, 190, 117);">
              <b-nav-item @click.prevent="goOldpep" class="nav-fintsize"><a>老人</a></b-nav-item>
              <b-nav-item class="nav-fintsize"><a>妇女</a></b-nav-item>
              <b-nav-item class="nav-fintsize"><a>儿童</a></b-nav-item>
            </b-nav-item-dropdown>
            <b-nav-item @click.prevent="goShare" class="nav-fintsize"><span>分享圈</span></b-nav-item>
            <b-nav-item @click.prevent="goContact" class="nav-fintsize"><span>联系我们</span></b-nav-item>
            <b-nav-item @click.prevent="goLogin" class="nav-fintsize" v-show="isShow"><span>登录</span></b-nav-item>
            <b-nav-item @click.prevent="goRegister" class="nav-fintsize" v-show="isShow"><span>注册</span></b-nav-item>
            <b-nav-item @click.prevent="goPersonal" class="nav-fintsize" v-show="!isShow">
              <img class="headPic" :src="getPic(headPic)" />
              <span style="color:#eee">{{userName}}</span>
            </b-nav-item>
            <b-nav-item @click="cancel" class="nav-fintsize" v-show="!isShow"><span>注销</span></b-nav-item>
          </b-navbar-nav>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
    <router-view :headPic="headPic" :userName="userName"></router-view>
    <footer class="myFooter">
      <div class="container">
        <p>关于恰饭吧 | 网站介绍 | 加入我们 | 联系我们 | 商务合作 | 用户协议 | 网站地图 | 友情链接</p>
        <p>苏ICP 备12345678. © 2019-2019 恰饭吧. Powered by Bootstrap.</p>
      </div>
    </footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      headPic: "",
      userName: "",
      isShow: true,
      toptop: 70,
      position: "fixed",
      boxShadow: "5px 3px 11px #b9aeae",
      top: 0,
      left: 0
    };
  },
   mounted() {
    window.addEventListener("scroll", this.handleScroll); // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
  },
  methods: {
    // 滚动条固定
    handleScroll() {
      var top = document.documentElement.scrollTop;
      var nav = document.getElementById("nav");
      if (top >= this.toptop) {
        nav.style.position = this.position;
        nav.style.boxShadow = this.boxShadow;
        nav.style.top = this.top;
        nav.style.left = this.left;
        nav.style.width='100%';
        nav.style.zIndex='10'
      } else {
        document.getElementById("nav").style = "";
      }
    },
    goHome() {
      this.$router.push("/index/home");
    },
    goMenu() {
      this.$router.push("/index/menu");
      // vevent.$emit("user", {headPic:this.headPic,userName:this.userName});
      console.log(this.headPic,this.userName)
    },
    goOldpep() {
      this.$router.push("/index/Oldpep");
    },
    goShare() {
      this.$router.push("/index/Share");
    },
    goContact() {
      this.$router.push("/index/Contact");
    },
    goLogin() {
      this.$router.push("/login");
    },
    goRegister() {
      this.$router.push("/register");
    },
    goPersonal() {
      this.$router.push("/personal");
    },
    cancel() {
      localStorage.removeItem("mytoken");
      this.isShow = true;
    },
    getPic(pic) {
      if (pic == "userimg.jpg") {
        return require("../assets/images/" + pic);
      } else {
        return require("../../../../Eatproj/EAT/public/upload/" + pic);
      }
    }
  },
  created() {
    this.$axios
      .get("http://localhost:3000/users/personal")
      .then(res => {
        console.log(res.data.data);
        this.headPic = res.data.data[0].headPic;
        this.userName = res.data.data[0].userName;
        this.isShow = false;
        console.log(this.headPic, this.userName);
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>
<style>
.nav-fintsize span{
  color:#333;
}
.nav-fintsize :hover span{
  color:#666;
  font-weight: bolder;

}
.nav-fintsize :hover a{
   color:green;
   font-size:20px;
}
.navbar-nav {
  line-height: 40px;
}
</style>
<style scoped>
.headPic {
  width: 30px;
  height: 30px;
}
.carousel-indicators {
  z-index:2;
}
.navbar-nav {
  /* position: fixed; */
  background-color: rgb(160, 190, 117);
  z-index: 5;
}
.bg-info {
  background-color: rgb(160, 190, 117) !important;
}
.nav-link {
  color: #333 !important;
}
.navbar {
  padding: 0;
}
.nav-link:hover {
  color: #333 !important;
}
/* #__BVID__131__BV_button_ /deep/ span{
  color:#333 
} */
.navbar-toggler {
  margin-right: 20px;
}
.ml-auto {
  margin-left: 200px;
}
/* ul{
  margin-left: 300px
} */
img {
  margin-bottom: 4px;
}
/* 底部 */
.myFooter {
  background-color: #666;
  color: #eee;
  text-align: center;
  padding: 20px;
  border-top: 1px solid #ccc;
  float: left;
  width: 100%;
}
</style>
